<template>
  <div id="videoList">
    <swiper :options="swiperOptions">
      <swiper-slide class="swiper" ref="mySwiper" :style="getSwiperHeight()" v-for="(item, index) in list" :key="index">
        
        <videos ref="videos" :videos="item" :index="index"></videos>
        
        <div class="left" v-if="pages-1 === index">
            <first-left :item="item"></first-left>
          </div>
          
        <div class="right" v-if="pages-1 === index">
            <first-right :item="item" :loveColor="loveColor" 
            @openComment="openComment"
            @openShare="openShare"
            ></first-right>
          </div>
         
      </swiper-slide>
      
    </swiper>
    <div class="comment-box" v-if="show">
      <comment @close="close"></comment>
    </div>
    <div class="share-box" v-if="showShare">
      <first-share @close="shareClose"></first-share>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import firstLeft from './firstLeft.vue';
import firstRight from './firstRight.vue';
import videos from './video.vue';
import axios from 'axios'
import comment from '../../components/comment.vue'
import firstShare from '../../components/share.vue'
export default {
  name: 'videoList',
  props:['clickIndex','clickList'],
  components: {
    swiper,
    swiperSlide,
    firstLeft,
    firstRight,
    videos,
    comment,
    firstShare
  },
  data() {
    return {
      showShare:false,
      show:false,
      pages: 1, //页数
      loveColor:false,
      swiperHeight: '730',
      swiperOptions: {
        direction: 'vertical', //设置滑动方向为垂直
        autoHeight: true, //自动高度
        mousewheel: true,
        mousewheelControl: false, //设置鼠标滚轮为false
        setWrapperSize: true,
        height: window.innerHeight,
        on: {
          tap: (event) => {
            // console.log(event);
            this.player(this.pages - 1);
          },
          slideNextTransitionStart: () => {
            this.pages += 1;
            this.next(this.pages - 1);
            // console.log(this.pages);
          },
          slidePrevTransitionStart: () => {
            if (this.pages > 1) {
              this.pages = this.pages - 1;
            }
            // console.log(this.pages);
            this.previous(this.pages);
          },
          doubleTap:(event)=>{
            this.showColor()
          }
        }
      },
      list: []
    };
  },
  computed:{
     swiperse() {
       return this.$refs.mySwiper.swiper
    }
  },
  mounted: function() {
    //原生获取屏幕高度
     this.getWindoHeight()
     // if(this.clickList === '' && this.clickIndex === ''){
       this.getVideos()//请求数据
     // }else{
       // console.log('当前列表++++++++'+this.clickList)
       // console.log('当前index++++++++'+this.clickIndex+1)
       // this.list = this.clickList
       // this.pages = this.clickIndex+1
       // this.player(this.pages);
     // }
  },
  methods: {
    shareClose(){
      this.showShare = false
    },
    openShare(){
      this.showShare = true
    },
    close(){//关闭评论
      this.show = false
    },
    openComment(){//打开评论组件
      this.show = true
    },
    getVideos(){//请求
      axios.get('api/videos.json')
      .then(this.getViseoSucc)
    },
    getViseoSucc(res){//成功
      this.list = res.data.list
    },
    getWindoHeight(){
      var orderHight = document.body.clientHeight;
      console.log(orderHight);
      this.swiperHeight = orderHight;
    },
    getSwiperHeight() {
      return { height: this.swiperHeight + 'px' };
    },
    player(val) {
      this.$refs.videos[val].judge();
    },
    next(val) {
      //滑动下一个视频
      this.$refs.videos[val - 1].pause();
      this.$refs.videos[val].play();
    },
    previous(val) {
      //滑动上一个视频
      console.log(val);
      this.$refs.videos[val - 1].play();
      this.$refs.videos[val].pause();
    },
    showColor(){
      this.loveColor = this.loveColor === false?true:false
    }
    
  }
};
</script>

<style scoped>
#videoList {
  width: 100%;
  height: 100%;
}
#videoList .comment-box{
  z-index: 9999;
  width: 100%;
  height: 10rem;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#videoList .share-box{
  z-index: 9999;
  width: 100%;
  height: 6rem;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#videoList .swiper {
  color: #cacaca;
  font-size: 2rem;
  position: relative;
}

.left {
  position: absolute;
  bottom: 1rem;
  left: 0.2rem;
  z-index: 20;
  font-size: 0.5rem;
}
.right {
  position: absolute;
  bottom: 1rem;
  right: 0.2rem;
  z-index: 20;
  font-size: 0.5rem;
}
</style>
